import React, { Component } from 'react'
import InputEle from '../../components/Login'


export default class LoginContainer extends Component {
  state = {
    username:{
        info:''
    },
    password:{
        info2:'',
        content:''
    },
    ensure:{
        info3:''
    }
}
validate = (type) => {
    if(type === 'username'){
        return (e) => {
            if(/^\w{6,20}$/.test(e.target.value)){
                this.setState({username:{info:'√'}})
            }else{
                this.setState({username:{info:'×'}})
            }
        }
    }
    if(type === 'password'){
        return (e) => {
            if(/^\w{6,20}$/.test(e.target.value)){
                this.setState({password:{info2:'√',content:e.target.value}})
            }else{
                this.setState({password:{info2:'×',content:e.target.value}})
            }
        }
    }
    if(type === 'ensure'){
        let {password:{content}} = this.state;
        return (e) => {
            if(e.target.value == content){
                this.setState({ensure:{info3:'√'}})
            }else{
                this.setState({ensure:{info3:'×'}})
            }
        }
    }
}
  render() {
    let {username:{info},password:{info2},ensure:{info3}} = this.state;
    let { title, usernameType, usernameContent, pwdType, pwdContent, pwdEnsure } = this.props;
    return (
        <div>
            <h1>{title}</h1>
            <InputEle info={info} validate={this.validate('username')} type={usernameType} content={usernameContent} />
            <InputEle info={info2} validate={this.validate('password')} type={pwdType} content={pwdContent} />
            <InputEle info={info3} validate={this.validate('ensure')} type={pwdType} content={pwdEnsure} />
            <input type="button" value="提交" />
        </div>
    )
  }
}
